<template>
	<view class="beijingse" v-if="pageShow">
		<!-- 更改名称 -->
		<u-popup :show="show" @close="close" mode="center" :round="15">
			<view class="mainpadding">
				<view class="xiaohei bigtext fonweight textcenter">更改设备名称</view>
				<input class="input margin_top" type="text" placeholder="请输入设备名称" v-model="userset_namet">
				<view class="flexcenter margin_top6">
					<view class="quxibtn flexcenter margin_right3" @click="close">取消</view>
					<view class="quedbtn flexcenter" @click="submit">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 删除设备 -->
		<u-popup :show="scshow" @close="scclose" mode="center" :round="15">
			<view class="mainpadding">
				<view class="xiaohei bigtext fonweight textcenter">提示</view>
				<view class="xiaohei titletext nofonweight textcenter margin_top4">确认要删除改设备么？</view>
				<view class="flexcenter margin_top6">
					<view class="quxibtn flexcenter margin_right3" @click="scclose">取消</view>
					<view class="quedbtn flexcenter">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu mainpadding2">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween" style="margin-top: 6rpx;">
						<view class="sanshis" @click="fhsyy">
							<view class="">
								<u-icon name="arrow-left" color="#000000" size="24"></u-icon>
							</view>
						</view>
						<view class="sanshis">
							<view class="sanshier xiaohei nofonweight textcenter">设备详细信息</view>
						</view>
						<view class="sanshis"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="fdbox">
			<view class="flexbetween">
				<view class="dazitext">{{dataAll.userset_name}}</view>
				<!-- <view class="xiaohui smalltext">设备型号：12331</view> -->
				<view class="xiaohui ershil">设备型号：{{dataAll.sbxh.name}}</view>
			</view>
			<view class="flexleft margin_top1">
				<!-- 在线 -->
				<view class="flexright" v-if="dataAll.status==1">
					<image class="zxicon margin_right1" src="../../static/image/system/zx.png" mode=""></image>
					<view class="xiaolv ershiba">在线</view>
				</view>
				<!--离线 -->
				<view class="flexright" v-if="dataAll.status==0">
					<image class="zxicon margin_right1" src="../../static/image/system/lx.png" mode=""></image>
					<view class="xiaofen ershiba">离线</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<!--状态  -->
			<view class="" v-show="isActive == 0">
				<view class="radius ffffff mainpadding margin_top flexbetween">
					<view class="titletext xiaohei">电池电量</view>
					<view class="titletext xiaocheng">{{dataAll.dcsdl}}</view>
				</view>
				<view class="radius ffffff mainpadding margin_top flexbetween">
					<view class="titletext xiaohei">信号强度值</view>
					<view class="titletext xiaocheng">{{dataAll.xhqd_text}}</view>
				</view>
				<view class="radius ffffff mainpadding margin_top flexbetween" v-if="dataAll.is_gdshow">
					<view class="titletext xiaohei">供电开关</view>
					<u-switch v-model="value" asyncChange @change="asyncChange"></u-switch>
				</view>
				<view class="radius ffffff mainpadding margin_top flexbetween">
					<view class="titletext xiaohei">太阳能板电压</view>
					<view class="titletext xiaocheng">{{dataAll.tynbdy}}V</view>
				</view>
				<view class="radius ffffff mainpadding margin_top flexbetween">
					<view class="titletext xiaohei">电池电压</view>
					<view class="titletext xiaocheng">{{dataAll.dcdy}}V</view>
				</view>
				<template v-if="dataAll.is_dlshow">
					<view class="radius ffffff mainpadding margin_top flexbetween">
						<view class="titletext xiaohei">太阳能板功率</view>
						<view class="titletext xiaocheng">{{Number(dataAll.tynbdy * dataAll.tynbdl).toFixed(2)}}W</view>
					</view>
					<view class="radius ffffff mainpadding margin_top flexbetween">
						<view class="titletext xiaohei">电池功率</view>
						<view class="titletext xiaocheng">{{Number(dataAll.dcdy * dataAll.dcdl).toFixed(2)}}W</view>
					</view>
				</template>
			</view>
			<!-- 统计 -->
			<view class="" v-show="isActive == 1">
				<view class="flexbetween xiahuaxian" @click="messageTime.timeShow=true">
					<view class="titletext xiaohei fonweight">日期</view>
					<view class="flexright">
						<view class="titletext xiaocheng margin_right1">{{searchtime}}</view>
						<u-icon name="arrow-right" color="#FF8000"></u-icon>
					</view>
				</view>
				<view class="flexcenter margin_top" v-if="dataAll.is_dlshow">
					<view class="huisebox2 flexcenter">
						<view class="sanshis2 flexcenter" @click="changetab(1)">
							<view :class="toptab==1?'baibtn1':'huistexxt'">电压</view>
						</view>
						<view class="sanshis2 flexcenter" @click="changetab(2)">
							<view :class="toptab==2?'baibtn1':'huistexxt'">功率</view>
						</view>
					</view>
				</view>
				<template v-if="toptab==1">
					<view class="flexbetween margin_top">
						<view class="titletext xiaohei">统计电压图表</view>
						<view class="huisebox flexcenter">
							<view class="sanshis flexcenter" @click="tabs=0;getcharts()">
								<view :class="tabs==0?'baibtn1':'huistexxt'">全部</view>
							</view>
							<view class="sanshis flexcenter" @click="tabs=1;getcharts()">
								<view :class="tabs==1?'baibtn1':'huistexxt'">太阳能板</view>
							</view>
							<view class="sanshis flexcenter" @click="tabs=2;getcharts()">
								<view :class="tabs==2?'baibtn1':'huistexxt'">电池</view>
							</view>
						</view>
					</view>
					<view class="margin_top" v-if="!chartnull">
						<view class="flexright" v-if="tabs==2">
							<!-- <view class="flexleft margin_right2">
								<view class="xlbtn1 margin_right1"></view>
								<view class="smalltext xiaolan">放电中</view>
							</view> -->
							<view class="flexleft margin_right2">
								<view class="strongtext xiaohei margin_right2">电池</view>
								<view class="flexleft margin_right2">
									<view class="lvbtn1 margin_right1"></view>
									<view class="smalltext xiaocheng">供电</view>
								</view>
								<view class="flexleft">
									<view class="huibtn margin_right1"></view>
									<view class="smalltext xiaohui" style="color: #7f7f7f;">截至/离线</view>
								</view>
							</view>
						</view>
						<view class="flexright" v-if="tabs==1">
							<view class="strongtext xiaohei margin_right2">太阳能板</view>
							<view class="flexleft margin_right2">
								<view class="xcbtn1 margin_right1"></view>
								<view class="smalltext xiaocheng">充电</view>
							</view>
							<view class="flexleft ">
								<view class="xiaozibtn margin_right1"></view>
								<view class="smalltext xiaozi">停止/离线</view>
							</view>
							
						</view>
						<view class="flexbetween" v-if="tabs==0">
							<view class="flexleft">
								<view class="strongtext xiaohei margin_right2">太阳能板</view>
								<view class="flexleft margin_right2">
									<view class="xcbtn1 margin_right1"></view>
									<view class="smalltext xiaocheng">充电</view>
								</view>
								<view class="flexleft ">
									<view class="xiaozibtn margin_right1"></view>
									<view class="smalltext xiaozi">停止/离线</view>
								</view>
								
							</view>
							<view class="flexleft" >
								<!-- <view class="flexleft margin_right2">
									<view class="xlbtn1 margin_right1"></view>
									<view class="smalltext xiaolan">放电中</view>
								</view> -->
								<view class="flexleft margin_right2">
									<view class="lvbtn1 margin_right1"></view>
									<view class="strongtext xiaohei">电池</view>
								</view>
							</view>
							
						</view>
					</view>
				</template>
				<template v-if="toptab==2">
					<view class="flexbetween margin_top">
						<view class="titletext xiaohei">统计功率图表</view>
						<view class="huisebox2 flexcenter">
							<view class="sanshis2 flexcenter" @click="tabs2=1;getcharts2()">
								<view :class="tabs2==1?'baibtn1':'huistexxt'">太阳能板</view>
							</view>
							<view class="sanshis2 flexcenter" @click="tabs2=2;getcharts2()">
								<view :class="tabs2==2?'baibtn1':'huistexxt'">电池</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<!--告警  -->
			<view class="" v-show="isActive == 2">
				<view class="radius ffffff mainpadding margin_top" v-for="item in list.data" :key="item.id">
					<view class="flexleft">
						<view class="margin_right2" >
							<u-icon name="error-circle-fill" v-if="item.type == 1" color="#FF3E3E" size="25"></u-icon>
							<u-icon name="chat-fill" v-if="item.type == 2" color="#ffa126" size="25"></u-icon>
						</view>
						
						<view class="titletext xiaohei">{{item.title}}</view>
					</view>
					<view class="titletext xiaohui margin_top2">{{item.createtime_text}}</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="" v-show="isActive == 3">
				<view class="radius ffffff mainpadding margin_top flexbetween" @click="show = true">
					<view class="titletext xiaohei">设备名称</view>
					<view class="flexright">
						<view class="titletext xiaocheng margin_right1">{{dataAll.userset_name}}</view>
						<u-icon name="arrow-right" color="#FF8000"></u-icon>
					</view>
				</view>
				<view class="radius ffffff mainpadding margin_top flexbetween">
					<view class="titletext xiaohei">设备序列号</view>
					<view class="titletext xiaocheng margin_right1">{{dataAll.zccode}}</view>
				</view>
				<view class="fenbtn flexcenter margin_top6" @click="delsubmit()">删除设备</view>
			</view>
		</view>
		<view v-show="isflag">
			<!-- 电压图表 -->
			<!-- 全部图表 -->
			<template v-if="tabs==0">
				<l-echart ref="chartRef" style="z-index: 10;width: 100%;height: 700rpx;display: block;"></l-echart>
			</template>
			<!-- 太阳能 || 电池图表 -->
			<template v-if="tabs==1">
				<l-echart ref="chartRefs" style="z-index: 10;width: 100%;height: 700rpx;display: block;"></l-echart>
			</template>
			<template v-if="tabs==2">
				<l-echart ref="chartRefsdc" style="z-index: 10;width: 100%;height: 700rpx;display: block;"></l-echart>
			</template>
		</view>
		<view v-show="isflag2">
			<l-echart ref="chartRefgls"
				style="z-index: 10;width: 100%;height: 700rpx;display: block;"></l-echart>
		</view>
		<view class="flexcenter" v-if="chartnull && isActive==1 && toptab==1">
			<view class="placeholderimage" style="margin-top: 200rpx;"></view>
		</view>
		<view class="flexcenter" v-if="chartnull2 && isActive==1 && toptab==2">
			<view class="placeholderimage" style="margin-top: 200rpx;"></view>
		</view>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm" @timecancel="timecancel"></timePicker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts.min.js'
	export default {
		data() {
			return {
				toptab:1,//1电压，2功率
				menutop: 0,
				isActive: 0,
				navList: [{
					index: 0,
					title: '状态'
				}, {
					index: 1,
					title: "统计"
				}, {
					index: 2,
					title: "告警"
				}, {
					index: 3,
					title: "详情"
				}],
				value: false,
				show: false,
				scshow: false,
				pageShow: true,
				listid: "",
				dataAll: {},
				userset_namet: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				searchtime: "",
				tabs: 0, //0全部，1太阳能，2电池
				tabs2: 1, //1太阳能，2电池
				messageTime: {
					timeShow: false,
					title: "选择筛选日期",
					mode: "date" //date日期，datetime年月日时分秒，time时间
				},
				chartnull: false,
				chartnull2: false,
				loading:false,
				changevalueq:false,
				chonglian:0,
			}
		},
		onLoad(options) {
			// this.searchtime = "2023-12-07"
			this.searchtime = httpRequest.returnDate(Number(new Date()))
			this.listid = options.id
			this.getDetail()
			this.init()
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			this.getcharts()
		},
		computed: {
			isflag() {
				if (this.isActive == 1 && this.messageTime.timeShow == false && this.toptab == 1 && this.chartnull == false) {
					return true
				} else {
					return false
				}
			},
			isflag2() {
				if (this.isActive == 1 && this.messageTime.timeShow == false && this.toptab == 2 && this.chartnull2 == false) {
					return true
				} else {
					return false
				}
			}
		},
		onPullDownRefresh() {
			this.zxPublish(1)
		},
		methods: {
			changetab(val){
				if(val == this.toptab){
					return false
				}
				if(val==1){
					this.toptab=1;
					getcharts()
				}
				if(val==2){
					this.toptab=2;
					this.getcharts2()
				}
			},
			timeConfirm(e) {
				this.searchtime = e
				this.messageTime.timeShow = false
				if(this.toptab==1){
					this.getcharts()
				}else{
					this.getcharts2()
				}
			},
			timecancel() {
				this.messageTime.timeShow = false
			},
			getcharts() {
				let url = '/api/sbcl/sbDyIndex'
				httpRequest.request(url, 'GET', {
					id: this.listid,
					searchtime: this.searchtime
				}, false, false, true).then(res => {
					if (this.tabs == 1 || this.tabs == 2) { //单个，1太阳能，2电池
						let chartData = {
							xAxisdata: [],
							seriesdata: [],
							// maxval:this.tabs==1?0:res.data.dc_bcdy,//电池标准值，超过变色，太阳能板不区分颜色只显示曲线
							maxval: this.tabs == 1 ? res.data.tynb_bcdy : res.data.dc_bcdy, //电池标准值，超过变色
							maxcolor: this.tabs == 1 ? "#FE8E1E" : "#41CB55", //电池标准值，超过变色
							maincolor: this.tabs == 1 ? "#6720FE" : "#7f7f7f" //电池标准值，超过变色
							// "#FE8E1E"
							// "#4D8BF7"
							// "#41CB55"
							// "#6720FE"
						}
						let data = this.tabs == 1 ? res.data.data2 : res.data.data1
						if (data.length == 0) {
							this.chartnull = true
							return false
						} else {
							this.chartnull = false
						}
						data.forEach(item => {
							chartData.xAxisdata.push(item.createtime_text)
							chartData.seriesdata.push(item.num)
						})
						this.drawcharts(chartData)
					} else { //全部
						let chartData = {
							xAxisdata: [],
							seriesdata: [
								[],
								[]
							],
							// maxval:this.tabs==1?0:res.data.dc_bcdy,//电池标准值，超过变色，太阳能板不区分颜色只显示曲线
							maxval: res.data.tynb_bcdy, //电池标准值，超过变色
							maxcolor: "#FE8E1E", //电池标准值，超过变色
							maincolor: "#6720FE" //电池标准值，超过变色
							// "#FE8E1E"
							// "#4D8BF7"
							// "#41CB55"
							// "#6720FE"
						}
						res.data.data1.forEach(item => { //电池
							chartData.xAxisdata.push(item.createtime_text)
							chartData.seriesdata[0].push(item.num)
						})
						res.data.data2.forEach(item => { //太阳能
							// chartData.xAxisdata.push(item.createtime_text)
							chartData.seriesdata[1].push(item.num)
						})
						if (res.data.data1.length == 0 && res.data.data2.length == 0) {
							this.chartnull = true
							return false
						} else {
							this.chartnull = false
						}
						this.drawchartsall(chartData)
					}

				})
			},
			getcharts2() {
				let url = '/api/sbcl/sbDyIndex'
				httpRequest.request(url, 'GET', {
					id: this.listid,
					searchtime: this.searchtime
				}, false, false, true).then(res => {
					let chartData = {
						xAxisdata: [],
						seriesdata: [],
					}
					let data = this.tabs2 == 1 ? res.data.data4 : res.data.data3
					if (data.length == 0) {
						this.chartnull2 = true
						return false
					} else {
						this.chartnull2 = false
					}
					data.forEach(item => {
						chartData.xAxisdata.push(item.createtime_text)
						chartData.seriesdata.push(item.num)
					})
					this.drawchartgls(chartData)
				})
			},
			drawcharts(chartData) { //太阳能 || 电池电压表
				console.log(chartData, "数据源1");
				let pieces = [{
					gt: Number(chartData.maxval),
					color: chartData.maxcolor
				}, {
					lt: 0,
					color: '#ff0000'
				}]
				let option = {
					// title:this.tabs==1?"太阳能":"电池",
					xAxis: {
						type: 'category',
						data: chartData.xAxisdata //x轴线名称
					},
					yAxis: {
						type: 'value'
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 1,
						// seriesIndex: [0, 1], // 虽然可以指定多个series，但是线的颜色只能设置一条
						// seriesIndex: [0, 1, 2],
						pieces,
						outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
							color: chartData.maincolor,
						},
					},
					tooltip: {
						show: true,
						trigger: 'axis',
						shadowBlur: 0, // 去除文字阴影
						backgroundColor: 'rgba(0,0,0,0.4)',
						textStyle: {
							color: '#fff'
						},
					},
					dataZoom: [{
						// type: 'slider', // 设置为滑动条型式
						type: 'inside', // 设置为滑动条型式
						show: true, // 显示dataZoom组件
						start: 0, // 默认显示的起始位置为0
						end: 100, // 默认显示的结束位置为100
						handleSize: 8, // 滑动条的手柄大小
						handleStyle: {
							color: '#DCE2E8' // 滑动条的手柄颜色
						},
						xAxisIndex: [0], // 表示控制第一个x轴
						filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
					}],
					series: [{
						data: chartData.seriesdata,
						type: 'line',
						// smooth: true,//是否弧线
						symbol: 'none',
						areaStyle:{ //区域样式
							origin: "start", //向最小值方向渐变，y轴有负值要写
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: this.tabs==1?'rgba(255,159,47, 0.2)':"rgba(65, 203, 85, 0.2)",
								},
								{
									offset: 1,
									color: "rgba(255,159,47, 0)",
								},
							]),
						},
					}]
				}
				if(this.tabs==1){
					// delete option.series[0].areaStyle
					let options2 = JSON.parse(JSON.stringify(option))
					this.$refs.chartRefs.init(config => {
						const {
							canvas
						} = config;
						const chart = this.echarts.init(canvas, null, config);
						canvas.setChart(chart);
						chart.setOption(JSON.parse(JSON.stringify(options2)));
						return chart;
					});
				}
				if(this.tabs==2){
					let options2 = JSON.parse(JSON.stringify(option))
					this.$refs.chartRefsdc.init(config => {
						const {
							canvas
						} = config;
						const chart = this.echarts.init(canvas, null, config);
						canvas.setChart(chart);
						chart.setOption(JSON.parse(JSON.stringify(options2)));
						return chart;
					});
				}
				
			},
			drawchartsall(chartData) { //全部电压表
				console.log(chartData, "数据源2");
				let pieces = [{
					gt: Number(chartData.maxval),
					color: chartData.maxcolor
				}, {
					lt: 0,
					color: '#ff0000'
				}]
				let option = {
					xAxis: {
						type: 'category',
						data: chartData.xAxisdata //x轴线名称
					},
					yAxis: {
						type: 'value'
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 1,
						// seriesIndex: [0, 1], // 虽然可以指定多个series，但是线的颜色只能设置一条
						// seriesIndex: [0, 1, 2],
						pieces: pieces,
						outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
							color: chartData.maincolor,
						},
					},
					tooltip: {
						show: true,
						trigger: 'axis',
						shadowBlur: 0, // 去除文字阴影
						backgroundColor: 'rgba(0,0,0,0.4)',
						textStyle: {
							color: '#fff'
						},
					},
					dataZoom: [{
						// type: 'slider', // 设置为滑动条型式
						type: 'inside', // 设置为滑动条型式
						show: true, // 显示dataZoom组件
						start: 0, // 默认显示的起始位置为0
						end: 100, // 默认显示的结束位置为100
						handleSize: 8, // 滑动条的手柄大小
						handleStyle: {
							color: '#DCE2E8' // 滑动条的手柄颜色
						},
						xAxisIndex: [0], // 表示控制第一个x轴
						filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
					}],
					series: [{
						data: chartData.seriesdata[0],
						type: 'line',
						// smooth: true,//是否弧线
						symbol: 'none',
						areaStyle: { //区域样式
							origin: "start", //向最小值方向渐变，y轴有负值要写
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: "rgba(65, 203, 85, 0.2)",
								},
								{
									offset: 1,
									color: "rgba(255,159,47, 0)",
								},
							]),
						},
						lineStyle: {
							color: '#41CB55'
						},
					}, {
						data: chartData.seriesdata[1],
						type: 'line',
						// smooth: true,//是否弧线
						symbol: 'none',
						areaStyle: { //区域样式
							origin: "start", //向最小值方向渐变，y轴有负值要写
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: "rgba(255,159,47, 0.2)",
								},
								{
									offset: 1,
									color: "rgba(255,159,47, 0)",
								},
							]),
						},
					}]
				}
				let options2 = JSON.parse(JSON.stringify(option))
				this.$refs.chartRef.init(config => {
					const {
						canvas
					} = config;
					const chart = this.echarts.init(canvas, null, config);
					canvas.setChart(chart);
					chart.setOption(JSON.parse(JSON.stringify(option)));
					return chart;
				});
			},
			drawchartgls(chartData) { //太阳能 || 电池功率表
				let option = {
					xAxis: {
						type: 'category',
						data: chartData.xAxisdata //x轴线名称
					},
					yAxis: {
						type: 'value'
					},
					tooltip: {
						show: true,
						trigger: 'axis',
						shadowBlur: 0, // 去除文字阴影
						backgroundColor: 'rgba(0,0,0,0.4)',
						textStyle: {
							color: '#fff'
						},
					},
					dataZoom: [{
						type: 'inside', // 设置为滑动条型式
						show: true, // 显示dataZoom组件
						start: 0, // 默认显示的起始位置为0
						end: 100, // 默认显示的结束位置为100
					}],
					series: [{
						data: chartData.seriesdata,
						type: 'line',
						// smooth: true,//是否弧线
						symbol: 'none',
						lineStyle: {
							color: '#FE8E1E'
						},
						areaStyle: { //区域样式
							origin: "start", //向最小值方向渐变，y轴有负值要写
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: "rgba(255,159,47, 0.2)",
								},
								{
									offset: 1,
									color: "rgba(255,159,47, 0)",
								},
							]),
						},
					}]
				}
				let options2 = JSON.parse(JSON.stringify(option))
				this.$refs.chartRefgls.init(config => {
					const {
						canvas
					} = config;
					const chart = this.echarts.init(canvas, null, config);
					canvas.setChart(chart);
					chart.setOption(JSON.parse(JSON.stringify(option)));
					return chart;
				});
			},
			asyncChange(){
				let val = this.value?2:3
				this.changevalueq = this.value
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				this.zxPublish(val)
			},
			zxPublish(val) {
				let url = '/api/index/zxPublish'
				httpRequest.request(url, 'GET', {
					id: this.listid,
					type:val
				}, false, false, true).then(res => {
					if(val==1){
						this.getDetail()
					}else{
						this.getDetail(1)
					}
					uni.stopPullDownRefresh()
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					id: this.listid
				}
				let url = '/api/sbcl/sbGjIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = resList
							_this.list.data = resList.data;
						}
						this.$forceUpdate()
					}
				})
			},
			onReachBottom() {
				if(this.isActive == 2){
					let _this = this;
					let list = _this.list;
					let page = _this.page;
					if (list.last_page <= page) {
						return false;
					}
					page++;
					_this.page = page;
					_this.init(true, page);
				}
				
			},
			getDetail(val) {
				let url = '/api/Sbcl/sbDetail'
				httpRequest.request(url, 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let status = res.data.gdkg_status == 1 ? true : false
						if(val==1){
							if(this.chonglian<10){//如果重新获取接口超过10次了也就是超过10s了需要提示操作失败请重试
								if(status==this.changevalueq){//如果是编辑开关的掉详情 并且他的这次获取的值跟之前一样就调重新掉接口
									setTimeout(()=>{
										this.chonglian = Number(this.chonglian) + 1
										this.getDetail(1)
									},1000)
								}else{//如果不一样就直接赋值就行了
									uni.hideLoading()
									this.chonglian = 0
									this.dataAll = res.data
									this.userset_namet = res.data.userset_name
									this.value = res.data.gdkg_status == 1 ? true : false
									this.pageShow = true
									httpRequest.toast("操作成功")
								}
							}else{
								this.chonglian = 0
								uni.hideLoading()
								httpRequest.toast("请求超时，请重试")
							}
						}else{
							this.chonglian = 0
							this.dataAll = res.data
							this.userset_namet = res.data.userset_name
							this.value = res.data.gdkg_status == 1 ? true : false
							this.pageShow = true
						}
						
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			submit() {
				let url = '/api/sbcl/editSb'
				if (this.userset_namet == this.dataAll.userset_name) {
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request(url, 'GET', {
					id: this.listid,
					userset_name: this.userset_namet
				}, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						httpRequest.toast("修改成功")
						this.dataAll.userset_name = this.userset_namet
						this.close()
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			delsubmit() {
				httpRequest.modal('提示', '确认要删除改设备么', true, (resp) => {
					if (resp) {
						let url = '/api/sbcl/delSb'
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						httpRequest.request(url, 'GET', {
							id: this.listid
						}, false, false, true).then(res => {
							uni.hideLoading()
							if (res.code == 1) {
								httpRequest.toast("删除成功")
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							} else {
								httpRequest.toast(res.msg)
							}
						})
					}
				})

			},
			scclose() {
				this.scshow = false
				// console.log('close');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			checked(index) {
				this.isActive = index
			},
			// 返回上一页
			fhsyy() {
				uni.navigateBack(1)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.sanshis2 {
		width: 50%;
	}

	.xcbtn1 {
		width: 29rpx;
		height: 7rpx;
		background: linear-gradient(79deg, #FF8000 0%, rgba(255, 128, 0, 0) 100%);
	}

	.xlbtn1 {
		
		
		width: 29rpx;
		height: 7rpx;
		background: linear-gradient(100deg, #3B80F7 0%, rgba(59, 128, 247, 0) 100%);
	}

	.xiaozibtn {
		width: 29rpx;
		height: 7rpx;
		background: linear-gradient(79deg, #5200FF 0%, rgba(82, 0, 255, 0) 100%);
	}

	.lvbtn1 {
		width: 29rpx;
		height: 7rpx;
		background: linear-gradient(100deg, #2FC645 0%, rgba(47, 198, 69, 0) 100%);
	}
	.huibtn{
		width: 29rpx;
		height: 7rpx;
		background: linear-gradient(100deg, #7f7f7f 0%, rgba(47, 198, 69, 0) 100%);
	}

	.huistexxt {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #6E6E83;
	}

	.baibtn1 {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF8000;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 125rpx;
		height: 47rpx;
		background: #FFFFFF;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
	}

	.huisebox {
		width: 430rpx;
		padding: 10rpx;
		background: #F1F1F1;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
	}
	.huisebox2 {
		width: 330rpx;
		padding: 10rpx;
		background: #F1F1F1;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
	}

	.input {
		padding: 18rpx 30rpx;
		background: #F9F9F9;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.fenbtn {
		width: 100%;
		height: 90rpx;
		background: rgba(255, 0, 0, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 1rpx solid #FF0000;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.zxicon {
		width: 18rpx;
		height: 18rpx;
	}

	.dazitext {
		font-size: 48rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.fdbox {
		background-size: 100% 100%;
		padding: 35rpx 30rpx;
		background-image: url('@/static/image/system/fdbj.png');
	}

	.tab_nav {
		// background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 60rpx;
		height: 6rpx;
		background-size: 100% 100%;
		background: linear-gradient(90deg, #FF8000 0%, rgba(255, 128, 0, 0) 100%);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 10rpx;
		margin: auto;
	}

	.dingbu {
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('../../static/image/system/tb.png');
	}
</style>